<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<div class="workspace-environments">

  <!-- Name -->
  <che-label-container che-label-name="Runtime name">
    <ng-form flex layout="column" name="workspaceEnvironmentsForm">
      <div layout="column" class="workspace-environments-input">
        <che-input-box che-form="workspaceEnvironmentsForm"
                   che-name="name"
                   che-place-holder="Name of the environment"
                   aria-label="Name of the environment"
                   ng-model="workspaceEnvironmentsController.newEnvironmentName"
                   che-on-change="workspaceEnvironmentsController.updateEnvironmentName(workspaceEnvironmentsForm.$valid)"
                   ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 2000, 'blur': 0 } }"
                   custom-validator="workspaceEnvironmentsController.isUnique($value)"
                   required
                   ng-maxlength="128"
                   ng-pattern="/^[A-Za-z0-9_\-\.]+$/"
                   che-readonly="workspaceEnvironmentsController.workspaceCreationFlow===false">
          <che-error-messages che-message-scope="workspace-details-environment"
                              che-message-name="Runtime name">
            <div ng-message="required">A name is required.</div>
            <div ng-message="pattern">The name should not contain special characters like space, dollar, etc.</div>
            <div ng-message="maxlength">The name has to be less than 128 characters long.</div>
            <div ng-message="md-maxlength">The name has to be less than 128 characters long.</div>
            <div ng-message="customValidator">This environment name is already used.</div>
          </che-error-messages>
        </che-input-box>
      </div>
    </ng-form>
  </che-label-container>

  <!-- Stacks -->
  <che-label-container ng-if="workspaceEnvironmentsController.workspaceCreationFlow"
                       che-label-name="Select Stack"
                       che-label-description="Stacks are recipes or images used to define your environment runtime. Workspace environments are used to build and run your project.">
    <ng-form name="workspaceStackForm">
      <workspace-select-stack workspace-stack-on-change="workspaceEnvironmentsController.changeWorkspaceStack(config, stackId)"
                              workspace-name="workspaceEnvironmentsController.workspaceName"
                              environment-name="workspaceEnvironmentsController.environmentName"
                              workspace-imported-recipe="workspaceEnvironmentsController.workspaceImportedRecipe"></workspace-select-stack>
    </ng-form>
  </che-label-container>

  <!-- Machines -->
  <che-label-container ng-if="workspaceEnvironmentsController.machines.length > 0"
                       che-label-name="Machines"
                       class="che-label-container-last">
  </che-label-container>
  <workspace-machine-config ng-repeat="machine in workspaceEnvironmentsController.machines track by machine.name | orderBy:'name'"
                            machine="machine"
                            machines-list="workspaceEnvironmentsController.machines"
                            environment-manager="workspaceEnvironmentsController.environmentManager"
                            machine-dev-on-change="workspaceEnvironmentsController.changeMachineDev(name)"
                            machine-name-on-change="workspaceEnvironmentsController.updateMachineName(oldName,newName)"
                            machine-config-on-change="workspaceEnvironmentsController.updateEnvironmentConfig()"
                            machine-on-delete="workspaceEnvironmentsController.deleteMachine(name)"
                            machine-is-opened="workspaceEnvironmentsController.machinesViewStatus[workspaceEnvironmentsController.environmentName][machine.name]"></workspace-machine-config>

  <!-- Recipe Content-->
  <che-label-container che-label-name="Recipe"
                       che-label-description="The contents of the runtime started by the workspace."
                       ng-if="workspaceEnvironmentsController.environment.recipe.content">
    <che-show-area>
      <div flex class="recipe-editor">
        <textarea ui-codemirror="workspaceEnvironmentsController.editorOptions"
                  ng-model="workspaceEnvironmentsController.environment.recipe.content"></textarea>
      </div>
    </che-show-area>
  </che-label-container>
  <!-- OR Location -->
  <che-label-container che-label-name="Recipe Location" ng-if="workspaceEnvironmentsController.environment.recipe.location">
    <che-text-info che-text="workspaceEnvironmentsController.environment.recipe.location"
                   che-href="workspaceEnvironmentsController.getLocationUrl()"
                   che-copy-clipboard="workspaceEnvironmentsController.getLocationUrl().length > 0"
                   class="recipe-location"></che-text-info>
  </che-label-container>
  <che-button-default class="add-machine-button"
                      che-button-title="Add" name="addButton"
                      ng-disabled="!workspaceEnvironmentsController.isMultiMachine()"
                      ng-click="workspaceEnvironmentsController.addMachine()"></che-button-default>
  <div class="recipe-warning-container" ng-hide="workspaceEnvironmentsController.isMultiMachine()">
    Add another machine by changing the environment type to <b>compose</b>, <b>kubernetes</b> or <b>openshift</b>
  </div>
</div>
